<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Push & Notification Demo</title>
</head>
<body>
  <button id="send-push">点击发送消息</button>
  <script>
    function urlB64ToUint8Array(base64String) {
      const padding = '='.repeat((4 - base64String.length % 4) % 4);
      const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');
      const rawData = window.atob(base64);
      const outputArray = new Uint8Array(rawData.length);
      for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
      }
      return outputArray;
    }

    function getApplicationServerKey() {
      return urlB64ToUint8Array(
        'BLW2Nfw3ylyUdwNqAreIPYbemxnxQ7ZTZSIJIHxrgw_xOiUP9enenF5JIHX8KXY8BZpzuGN_0mCehb2XEqms3hg'
      );
    }

    window.addEventListener('load', function() {
      if ('serviceWorker' in navigator && 'PushManager' in window) {
        navigator.serviceWorker.register('./sw.js').then(function(registration) {
          registration.pushManager.getSubscription().then(function(subscription) {
            if (subscription) {
              console.log('通知已注册....');
              return;
            }
            registration.pushManager.subscribe({
              userVisibleOnly: true,
              applicationServerKey: getApplicationServerKey()
            }).then(function(subscription) {
              fetch('/subscribe', {
                headers: {
                  'content-type': 'application/json'
                },
                method: 'POST',
                body: JSON.stringify(subscription)
              }).then(function(response) {
                return response.json();
              }).then(function() {
                console.log('通知注册成功……');
              }).catch(function() {
                subscription.unsubscribe();
                console.log('通知注册失败……');
              })
            });
          });
        });
      }
      document.getElementById('send-push').addEventListener('click', function() {
        fetch('/push', { method: 'POST' });
      });
    });
  </script>
</body>
</html>